<template>
	<div class="system-user-container">
		<el-card shadow="hover" class="filtering">
			<div class="filtering-list-flex">
				<div class="filtering-list-title">商品页面</div>
				<div class="filtering-list-item">
					<Radio @change="initTableData" v-model:selected="filtering.select" :selectedList="[{ id: 1, name: '商品列表' }, { id: 2, name: '商品回收站' }]"></Radio>
				</div>
			</div>
			<div class="filtering-list-flex">
				<div class="filtering-list-title">商品名称</div>
				<div class="filtering-list-item"><el-input v-model="filtering.input1" style="max-width: 180px" placeholder="请输入商品名称"></el-input></div>
			</div>
			<div class="filtering-list-flex">
				<div class="filtering-list-title">添加时间</div>
				<div class="filtering-list-item"><el-date-picker v-model="filtering.pickData" placeholder="请输入添加时间" type="date" /></div>
			</div>
			<div class="form-search-footer mt20">
				<el-button :loading="tableData.loading" type="primary" @click="formFind">查询</el-button>
				<el-button @click="formReset">重置</el-button>
			</div>
		</el-card>
		<el-card shadow="hover" class="mt5">
			<div class="system-user-search mb10">
				<div>
					<el-button v-if="filtering.select === 1" type="success" icon="el-icon-plus" @click="addList">添加商品</el-button>
					<el-button v-if="filtering.select === 2" :disabled="multipleSelection.length === 0" type="danger" icon="el-icon-delete" @click="delList">批量删除</el-button>
				</div>
			</div>
			<mTableLength v-if="filtering.select === 2" :number="multipleSelection.length" @cancel="cancel"></mTableLength>
			<el-table
				ref="multipleTable"
				:data="tableData.data"
				stripe
				v-loading="tableData.loading"
				style="width: 100%"
				:header-cell-style="{ color: '#7f8da6', backgroundColor: '#F5F6F8' }"
				@selection-change="handleSelectionChange"
			>
				<el-table-column v-if="filtering.select === 2" type="selection" width="55" fixed="left" />
				<el-table-column prop="goodsId" label="商品编号" show-overflow-tooltip></el-table-column>
				<el-table-column label="商品名称" show-overflow-tooltip>
					<template #default="scope">
						<div class="flex-ac">
							<el-image class="system-user-photo" :src="getBaseUrl + scope.row.mainPic" :preview-src-list="[getBaseUrl + scope.row.mainPic]"></el-image>
							<div class="ml5">{{ scope.row.goodsName }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="account" label="商品管理人" show-overflow-tooltip></el-table-column>
				<el-table-column prop="price" label="价格" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ filterMoney(scope.row.price) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="postage" label="运费" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ filterMoney(scope.row.postage) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="130"></el-table-column>
				<el-table-column prop="path" label="操作" :width="filtering.select === 1 ? 120 : 180" fixed="right">
					<template #default="scope">
						<el-button v-if="filtering.select === 2" size="mini" @click="reduction(scope.row)" icon="el-icon-refresh-left" type="info"></el-button>
						<el-button size="mini" @click="editList(scope.row)" icon="el-icon-edit" type="primary"></el-button>
						<el-button size="mini" @click="onRowDel(scope.row)" icon="el-icon-delete" type="danger"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, computed } from 'vue'
import Pagination from '/@/components/Pagination/index.vue'
import Radio from '/@/components/Radio/index.vue'
import mTableLength from '/@/components/mTableLength/index.vue'
import { verifyNumberComma } from '/@/utils/toolsValidate'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from '/@/store/index.ts'
import Base64 from '/@/utils/base64'
import { getGoodsList, updateGoods } from '/@/api/good'

export default {
	name: 'goodList',
	components: { Pagination, Radio, mTableLength },
	setup() {
		const router = useRouter()
		const store = useStore()

		const getBaseUrl = computed(() => {
			return store.state.baseServices.baseServices.img_base_url
		})

		const refs: any = reactive({
			multipleTable: null
		})

		const state: any = reactive({
			filtering: {
				select: 1,
				input1: '',
				pickData: ''
			},
			tableData: {
				data: [],
				loading: false,
				total: 0,
				param: {
					pageNum: 1,
					pageSize: 10
				}
			},
			multipleSelection: []
		})
		// 初始化表格数据
		const initTableData = () => {
			state.tableData.loading = true

			const params = {
				state: state.filtering.select,
				searchText: state.filtering.input1,
				createTime: state.filtering.pickData,
				pageNum: state.tableData.param.pageNum,
				pageSize: state.tableData.param.pageSize
			}

			getGoodsList(params)
				.then(res => {
					const { datas } = res

					state.tableData.data = datas.list
					state.tableData.total = datas.total
				})
				.finally(() => {
					state.tableData.loading = false
				})
		}
		const filterMoney = (money: Number) => {
			return verifyNumberComma(money)
		}
		// 添加
		const addList = () => {
			router.push({
				path: '/good/operationGoodList',
				query: {
					info: Base64(
						JSON.stringify({
							id: 0,
							type: 'add'
						})
					)
				}
			})
		}
		// 编辑
		const editList = (row: object) => {
			router.push({
				path: '/good/operationGoodList',
				query: {
					info: Base64(
						JSON.stringify({
							id: row.goodsId,
							type: 'edit'
						})
					)
				}
			})
		}
		// 多行删除
		const delList = () => {
			ElMessageBox.confirm('此操作将删除选中所有商品信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				ElMessage.success('删除成功！')
				initTableData()
			})
			console.log(state.multipleSelection)
		}
		// 当前行删除
		const onRowDel = (row: object) => {
			switch (state.filtering.select) {
				case 1:
					ElMessageBox.confirm('此操作将会把选中商品放置回收站, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						updateGoods({ goodsId: row.goodsId, state: 2 }).then(() => {
							ElMessage.success('转移回收站成功！')
							initTableData()
						})
					})
					break
				case 2:
					ElMessageBox.confirm('此操作将彻底删除选中商品信息, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						ElMessage.success('删除成功！')
						initTableData()
					})
					break
			}
		}
		// 当前行还原
		const reduction = (row: object) => {
			ElMessageBox.confirm('此操作将还原该商品信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				updateGoods({ goodsId: row.goodsId, state: 1 }).then(() => {
					ElMessage.success('还原成功！')
					initTableData()
				})
			})
		}
		const getList = val => {
			state.tableData.param.pageNum = val.page
			state.tableData.param.pageSize = val.limit
			initTableData()
		}
		const formFind = () => {
			initTableData()
		}
		const formReset = () => {
			state.filtering.select = 1
			state.filtering.input1 = ''
			state.filtering.pickData = ''
		}
		const handleSelectionChange = val => {
			state.multipleSelection = val
		}
		const cancel = () => {
			refs.multipleTable.clearSelection()
		}
		// 页面加载时
		onMounted(() => {
			initTableData()
		})
		return {
			initTableData,
			getBaseUrl,
			filterMoney,
			addList,
			editList,
			delList,
			onRowDel,
			reduction,
			getList,
			formFind,
			formReset,
			handleSelectionChange,
			cancel,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss">
.system-user-container {
	.system-user-search {
		display: flex;
		justify-content: space-between;
	}
	.system-user-photo {
		width: 40px;
		height: 40px;
	}
}
</style>
